<template>
  <div class="container">
    <div class="menu">
      <div class="menu-item">
        <span class="title">语言: </span>
        <el-select v-model="language" placeholder="选择语言" size="small">
          <el-option v-for="item in languageList" :key="item.value" :label="item.label" :value="item.value" />
        </el-select>
      </div>

      <div class="menu-item">
        <span class="title">主题: </span>
        <el-select v-model="theme" placeholder="选择主题" size="small">
          <el-option v-for="item in themeList" :key="item.value" :label="item.label" :value="item.value" />
        </el-select>
      </div>

      <div class="menu-item">
        <span class="title">缩进: </span>
        <el-input v-model.number="options.tabSize" size="small" />
      </div>

      <div class="menu-item">
        <span class="title">大小: </span>
        <el-input v-model.number="options.fontSize" size="small" />
      </div>
    </div>

    <div class="editor">
      <MonacoDditor
        v-model="codeStr"
        height="84vh"
        :language="language"
        :theme="theme"
        :options="options"
        @editor-mounted="editorMounted"
      ></MonacoDditor>
    </div>
  </div>
</template>

<script lang="ts" setup>
import { ref, reactive } from "vue";
import * as monaco from "monaco-editor";
import { languageList, themeList } from "./menuConfig";
import type { Options, Theme } from "@/components/Document/MonacoDditor/monacoEditorType";

const codeStr = ref(`const str = "hello world";`);
const language = ref("typescript");
const theme = ref<Theme>("vs-dark");
const options = reactive<Options>({
  // const options = reactive<Partial<Options>>({
  tabSize: 2,
  fontSize: 16
});

const editorMounted = (editor: monaco.editor.IStandaloneCodeEditor) => {
  // console.log("editor mounted", editor);
};
</script>

<style lang="scss" scoped>
.container {
  .menu {
    display: flex;
    margin-bottom: 10px;
    flex: 1;
    .menu-item {
      margin-right: 10px;
      max-width: 140px;
      :deep(.el-select),
      :deep(.el-input) {
        width: 70%;
        .el-input,
        .el-input__wrapper > .el-input__inner {
          width: 100%;
        }
      }
      .title {
        font-size: 14px;
        margin-right: 6px;
        color: #515253;
      }
    }
  }
}
</style>
